import React, { Component } from 'react'
import { ReturnHeader } from '../header'
import { helper, config, myFetch } from '../utils'
import { Result, Progress, Button, ListView, Modal } from 'antd-mobile'
import { hashHistory } from 'react-router'
import { ProjectAlert } from '../project'
import moment from 'moment'

const alert = Modal.alert

export default class Subscription extends Component {
  constructor() {
    super()
    this.onFetchData = this.onFetchData.bind(this)
    this.onFetchDetail = this.onFetchDetail.bind(this)
    this.onProjectShow = this.onProjectShow.bind(this)
    this.state = {
      data: [],
      num: 0,
    }
  }
  onFetchDetail(id) {
    const options = {
      method: 'POST',
      body: ''
    }
    myFetch(`${config.rootApi}/project/${id}/detail`,options, true)
      .then(rs => {
        this.setState({
          num: rs.value.viewDetailPrice
        })
        this.onProjectShow(id)
      })
      .catch(err => helper.onPromiseError(err))
  }
  onProjectShow(id) {
    const options = {
      method: 'POST',
      body: ''
    }
    myFetch(`${config.rootApi}/project/${id}/viewed`, options, true)
      .then((rs) => {
        if (rs) {
          hashHistory.push({
            pathname: '/project/detail',
            query: {
              id: id
            }
          })
        } else {
        alert('查看项目详情', <ProjectAlert balance={200} num={this.state.num}/>, [
          { text: '否', onPress: () => console.log('cancel') },
          { text: '是', onPress: () => {
            hashHistory.push({
            pathname: '/project/detail',
            query: {
              id: id
            }
          })
          } },
        ])
        }
      })
      .catch(err => {
        helper.onPromiseError(err)
      })
  }
  onFetchData() {
    const options = {
      method: 'POST',
      body: JSON.stringify({
        page: 0,
        size: 10,
      })
    }
    myFetch(`${config.rootApi}/project/my/bought`,options,true)
    .then((rs) => {
      this.setState({
        data: rs.content
      })
    })
    .catch(err => helper.onPromiseError(err))
  }
  componentDidMount() {
    this.onFetchData()
  }
  render() {
    const { data, num } = this.state
    return (
      <div className="rt-subsrciption">
        <ReturnHeader title="我认购的项目"/>
        <div className="cm-scrollable-container">
          <ul className="-list">
          {
            data.length < 1 ? 
            <Result
              imgUrl="https://os.alipayobjects.com/rmsportal/MKXqtwNOLFmYmrY.png"
              message="没有相关数据"
            />
            :
            data.map((val, index) => {
              return (
                <li className="-item" key={val.id}>
                <div className="-item-top">
                  <div className="-item-show">
                    <div className="-left">
                      <img src={require('../../statics/images/pj01.png')} />
                    </div>
                    <div className="-right">
                      <div className="-title">
                        <strong>
                          {val.title}
                        </strong>
                        <span>
                          阶段: {moment(val.beginDate).format('YYYY-MM-DD')}
                        </span>
                      </div>
                      <p>{val.description}</p>
                      <div className="-price">起投：<span>{val.startAmount}</span></div>
                    </div>
                  </div>
                  <div className="-progress">
                    <Progress percent={val.progress} position="normal" />
                    <span className="-show">{val.progress}%</span>
                  </div>
                </div>
                <div className="-item-bottom">
                  <span
                    className="-btn1"
                    onClick={
                      () => {
                        hashHistory.push({
                          pathname: '/share/project',
                          query: {
                            id: val.id
                          }
                        })
                      }
                    }
                  >
                    <img src={require('../../statics/images/icon_share_s.png')} />
                    <em>分享</em>
                  </span>
                  <span
                    className="-btn2"
                    onClick={
                      () => {
                        this.onFetchDetail(val.id)
                      }
                    }
                  >
                    查看详情
                  </span>
                </div>
              </li>
                )
            })
          }
          </ul>
        </div>
      </div>
      )
  }
}